<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 
            组件：局部代码和资源的集合
            作用：复用

            如何使用？
                三个步骤：
                    1.定义组件
                    2.注册组件
                    3.使用组件
            定义组件的全写和简写
            定义全局组件和定义局部组件

         -->
        <div id="app">
            <!-- 3.使用组件 每使用一次组件其实就是new Vue(),每次都生成一个新的实例化对象 vc-->
            <mycomponent></mycomponent>
            <mycomponent></mycomponent>
            <mycomponent></mycomponent>
            <mycomponent></mycomponent>

        </div>
        <script src="./js/vue.js"></script>
        <script>
            // 全局定义组件
            // 全写
            // 1.定义组件
                // Vue.extend({
                    // template:``,
                    // data(){
                    //     return {

                    //     }
                    // },
                    // methods:{},
                // })
            // 参数：配置对象 
            // 返回一个构造函数
        //    const VueComponent =  Vue.extend({
        //         // tempalate必须要有一个根标签
        //         // 不用再写el了，template这个配置其实就是el
        //         template:`
        //         <div>
        //             <h1>你好</h1>
        //             <p>{{num}}</p>
        //             <button @click="handler">点击修改自己的num</button>
        //         </div>`,
        //         // data必须是一个函数，函数返回一个对象
        //         data(){
        //             return {
        //                 num:0,
        //             }
        //         },
        //         methods:{
        //             handler(){
        //                 this.num ++
        //             }
        //         },
        //     })
            // 2.注册组件
            // Vue.component('组件名',定义组件返回的构造函数)
            // 本质：
            // Vue.component('mycomponent',VueComponent)

            // 简写
            // 第一步和第二步的整合
            // Vue.component('组件名',配置对象)
            // Vue.component('mycomponent',{
            //     // tempalate必须要有一个根标签
            //     // 不用再写el了
            //     template:`
            //     <div>
            //         <h1>你好</h1>
            //         <p>{{num}}</p>
            //         <button @click="handler">点击修改自己的num</button>
            //     </div>`,
            //     // data必须是一个函数，函数返回一个对象
            //     data(){
            //         return {
            //             num:0,
            //         }
            //     },
            //     methods:{
            //         handler(){
            //             this.num ++
            //         }
            //     },
            // })
           
            const vm = new Vue({
                el:'#app',
                // 定义局部组件
                // components:{组件名:配置对象}
                components:{
                    mycomponent:{
                        template:`
                        <div>
                            <h1>你好</h1>
                            <p>{{num}}</p>
                            <button @click="handler">点击修改自己的num</button>
                        </div>`,
                        // data必须是一个函数，函数返回一个对象
                        data(){
                            return {
                                num:0,
                            }
                        },
                        methods:{
                            handler(){
                                this.num ++
                            }
                        },
                    }
                }

            })
        </script>
    </body>
</html>